<!-- eslint-disable no-unused-expressions -->
<!-- 合同管理-合同列表-编辑合同 -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    <template #buts>
      <a-button @click="cancel"> 取消 </a-button>
      <a-button
        v-show="currList.list.state === 1 || currList.list.state === 3"
        @click="addContract"
        type="primary"
      >
        提交
      </a-button>
    </template>
  </pageHeader>
  <div class="contract-index">
    <a-form
      ref="form"
      :model="contract.data"
      autoLabelWidth
      :layout="(layout as Tlayout)"
    >
      <a-row :gutter="16">
        <a-col
          v-for="element in contractForm.data.design.form"
          :key="element.id"
          :span="element.span"
        >
          <FormItem
            :name="element.name"
            :componentType="element.componentType"
            v-model:props="element.props"
            :required="element.required"
            :disabled="element.disabled"
            v-model:values="element.values"
          />
        </a-col>
      </a-row>
    </a-form>
  </div>
  <div v-if="route.query.key">
    <div>
      <div class="title-item">
        <span style="padding-left: 40px"> 审核结果</span>
      </div>
      <div style="width: 95%; margin: 20px 40px">
        <a-space :size="40" direction="vertical" fill>
          <div
            ><span>是否通过审核：</span>
            <a-radio-group v-model="findingsAudit" size="large">
              <a-radio
                :value="1"
                :style="{
                  marginRight: '20px',
                }"
              >
                <template #radio="{ checked }">
                  <div
                    :style="{
                      display: 'flex',
                      width: '135px',
                    }"
                    :class="checked ? 'checked-radio' : 'unchecked-radio'"
                  >
                    <div
                      :style="{
                        width: '35px',
                        textAlign: 'center',
                      }"
                      :class="
                        checked
                          ? 'radio-icon-box-checked'
                          : 'radio-icon-box-unchecked'
                      "
                    >
                      <icon-check-circle
                        :class="
                          checked
                            ? 'radio-icon-checked'
                            : 'radio-icon-unchecked'
                        "
                        class="radio-icon"
                        size="20px"
                      />
                    </div>
                    <div
                      :style="{
                        width: '100px',
                        textAlign: 'center',
                      }"
                    >
                      通过
                    </div>
                  </div>
                </template>
              </a-radio>
              <a-radio :value="2">
                <template #radio="{ checked }">
                  <div
                    :style="{
                      display: 'flex',
                      width: '135px',
                    }"
                    :class="checked ? 'checked-radio' : 'unchecked-radio'"
                  >
                    <div
                      :style="{
                        width: '35px',
                        textAlign: 'center',
                      }"
                      :class="
                        checked
                          ? 'radio-icon-box-checked'
                          : 'radio-icon-box-unchecked'
                      "
                    >
                      <icon-check-circle
                        :class="
                          checked
                            ? 'radio-icon-checked'
                            : 'radio-icon-unchecked'
                        "
                        class="radio-icon"
                        size="20px"
                      />
                    </div>
                    <div
                      :style="{
                        width: '100px',
                        textAlign: 'center',
                      }"
                    >
                      不通过
                    </div>
                  </div>
                </template>
              </a-radio>
            </a-radio-group></div
          >
        </a-space>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import dayjs from 'dayjs';
  import {
    GetContractTemplateStatusOn,
    PutContract,
    GetContractDetail,
  } from '@/api/contract-management/contract-list/index';
  import { GetContractTypeSetting } from '@/api/contract-management/base-setting/type-contract/index';
  import { useRouter, useRoute } from 'vue-router';

  const router = useRouter();
  const route = useRoute();
  const title = '编辑合同';
  const breadCrumb = ['合同管理', '合同列表', '编辑合同'];
  const findingsAudit = ref();
  const currList = reactive<any>({
    list: {},
  });

  interface ContractType {
    data: {
      id: number;
      number: string;
      clientCompanyId: number;
      userStaffId: number;
      extend: string;
      orderTime: string;
      product: any;
      delivery: any;
      orderTemplateId: number;
      remark: string;
    };
  }
  const contract = reactive<any>({
    data: {
      number: '',
      name: '',
      extend: '',
      orderTime: '',
      endTime: '',
      ourSignUser: undefined,
      clientCompanyId: undefined,
      templateId: undefined,
      ctotalPrice: '',
      createBy: JSON.parse(sessionStorage.getItem('loginInfo')).id, // 创建者id
    },
  });

  interface ContractFormType {
    data: {
      design: {
        form: any[];
      };
    };
  }
  const contractForm = reactive<any>({
    data: { design: { form: [] } },
  });
  const getByTemplateStatusOn = async () => {
    let res = await GetContractTemplateStatusOn({
      ctempTypeid: route.query.id,
      ctempTypeidParent: route.query.idParent,
    });
    contractForm.data = res;
    contractForm.data.design.form
      .sort((a, b) => a.sort - b.sort)
      .forEach((item) => {
        item.disabled = true;
        item.props = JSON.parse(item.props);
        item.values = item.values ? JSON.parse(item.values)[0] || [] : [];
      });
  };

  // 过滤掉一些不用传的属性
  const keys = Object.keys(contract.data);

  // 提交按钮
  const addContract = async () => {
    if (currList.state !== 4 && currList.state !== 5) return;
    // 控件对应上字段
    contractForm.data.design.form.forEach((item) => {
      if (item.fieldName && keys.includes(item.fieldName)) {
        if (item.fieldName === 'ctotalPrice') {
          contract.data.totalPrice = parseFloat(item.values.totalPrice);
          contract.data.totalUnit = item.values.totalUnit;
        } else contract.data[item.fieldName] = item.values[0];
      }
    });
    contract.data.templateId = contractForm.data.id; // 赋值模板id

    contract.data.extend = JSON.stringify(contractForm.data.design.form);
    // TODO:时间改成控件时间
    contract.data.orderTime = dayjs(contract.data.orderTime);
    if (findingsAudit.value === 1) {
      contract.data.state = 4;
    } else {
      contract.data.state = 5;
    }
    contract.data.endTime = dayjs(contract.data.endTime);
    if (!route.query.key) {
      contract.data.ctempTypeid = Number(route.query.id);
      contract.data.ctempTypeidParent = Number(route.query.idParent);
    }
    delete contract.data.ctotalPrice;
    await PutContract(contract.data);
    router.back();
  };

  // 获取合同详情
  const getContractDetail = async (id: number) => {
    try {
      const res = await GetContractDetail({ id });
      currList.list = res;
      contractForm.data.design.form = JSON.parse(currList.list.extend);
      contractForm.data.design.form
        .sort((a, b) => a.sort - b.sort)
        .forEach((item) => {
          item.disabled = true;
          if (item.code === 'NUMBER-UNIVERSAL') {
            item.values = [currList.list.number];
          }
          // item.props = JSON.parse(item.props);
          // item.values = item.values ? JSON.parse(item.values)[0] || [] : [];
          if (item.values !== '') {
            if (item.values[0] === '') {
              item.values = [];
            }
          }
        });
    } catch (error: unknown) {
      console.log(error);
    }
  };

  const SubmitReview = async () => {
    // currList.list.state =
    await PutContract(currList.list);
    router.back();
  };

  onMounted(() => {
    let contractId = Number(route.query.id);
    contract.data.id = contractId;
    getContractDetail(contractId);
  });

  // 取消按钮
  const cancel = () => router.back();
</script>

<style scoped lang="less">
  .contract-index {
    padding: 16px;

    .addClient {
      position: absolute;
      margin-left: 20px;
      margin-top: -15px;
    }

    :deep(.arco-input[disabled]),
    :deep(.arco-textarea[disabled]) {
      -webkit-text-fill-color: #165dff;
    }
  }
  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }

  .unchecked-radio {
    background-color: #fff;
    color: #dcdfe6;
    border: 1px solid #dcdfe6;
    font-weight: 700;
    font-size: 16px;
  }
  .checked-radio {
    background-color: #3491fa;
    color: #fff;
    border: 1px solid #3491fa;
    font-weight: 700;
    font-size: 16px;
  }
  .radio-icon-box-checked {
    border: 1px solid #3491fa;
    background-color: #fff;
  }
  .radio-icon-box-unchecked {
    border: 1px solid rgba(220, 223, 230, 1);
  }
  .radio-icon-checked {
    color: #3491fa;
  }

  .radio-icon-unchecked {
  }
  .radio-icon {
    position: relative;
    top: 3px;
  }
</style>
